
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Parallax</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
            rel="stylesheet"
        >
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="parallax-image parallax-image-01"></div>
        <section>
            <h2>Parallax Example</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus augue non sapien. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Aliquam in lorem sit amet leo accumsan lacinia. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Cras elementum. Phasellus faucibus molestie nisl. Aenean id metus id velit ullamcorper pulvinar. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. In dapibus augue non sapien. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim.</p>
            <p>Nulla pulvinar eleifend sem. Sed convallis magna eu sem. Donec quis nibh at felis congue commodo. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nam quis nulla. Vivamus porttitor turpis ac leo. Fusce suscipit libero eget elit. Aliquam erat volutpat. Nunc auctor. Aliquam id dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean vel massa quis mauris vehicula lacinia. Aliquam id dolor.</p>
            <p>Integer tempor. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Integer pellentesque quam vel velit. Fusce aliquam vestibulum ipsum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Vivamus porttitor turpis ac leo. Maecenas sollicitudin. Nam quis nulla. Phasellus faucibus molestie nisl. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Fusce tellus. Duis pulvinar. Curabitur sagittis hendrerit ante. Nullam rhoncus aliquam metus. Mauris tincidunt sem sed arcu. Integer lacinia. Proin mattis lacinia justo. Etiam egestas wisi a erat.</p>
        </section>
        <div class="parallax-image parallax-image-02"></div>
        <section>
            <h2>Parallax Example</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus augue non sapien. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Aliquam in lorem sit amet leo accumsan lacinia. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Cras elementum. Phasellus faucibus molestie nisl. Aenean id metus id velit ullamcorper pulvinar. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. In dapibus augue non sapien. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim.</p>
            <p>Nulla pulvinar eleifend sem. Sed convallis magna eu sem. Donec quis nibh at felis congue commodo. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nam quis nulla. Vivamus porttitor turpis ac leo. Fusce suscipit libero eget elit. Aliquam erat volutpat. Nunc auctor. Aliquam id dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean vel massa quis mauris vehicula lacinia. Aliquam id dolor.</p>
            <p>Integer tempor. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Integer pellentesque quam vel velit. Fusce aliquam vestibulum ipsum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Vivamus porttitor turpis ac leo. Maecenas sollicitudin. Nam quis nulla. Phasellus faucibus molestie nisl. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Fusce tellus. Duis pulvinar. Curabitur sagittis hendrerit ante. Nullam rhoncus aliquam metus. Mauris tincidunt sem sed arcu. Integer lacinia. Proin mattis lacinia justo. Etiam egestas wisi a erat.</p>
        </section>
        <div class="parallax-image parallax-image-03"></div>
        <section>
            <h2>Parallax Example</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus augue non sapien. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Aliquam in lorem sit amet leo accumsan lacinia. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Cras elementum. Phasellus faucibus molestie nisl. Aenean id metus id velit ullamcorper pulvinar. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. In dapibus augue non sapien. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim.</p>
            <p>Nulla pulvinar eleifend sem. Sed convallis magna eu sem. Donec quis nibh at felis congue commodo. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nam quis nulla. Vivamus porttitor turpis ac leo. Fusce suscipit libero eget elit. Aliquam erat volutpat. Nunc auctor. Aliquam id dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean vel massa quis mauris vehicula lacinia. Aliquam id dolor.</p>
            <p>Integer tempor. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Integer pellentesque quam vel velit. Fusce aliquam vestibulum ipsum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Vivamus porttitor turpis ac leo. Maecenas sollicitudin. Nam quis nulla. Phasellus faucibus molestie nisl. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Fusce tellus. Duis pulvinar. Curabitur sagittis hendrerit ante. Nullam rhoncus aliquam metus. Mauris tincidunt sem sed arcu. Integer lacinia. Proin mattis lacinia justo. Etiam egestas wisi a erat.</p>
        </section>
    </body>
</html>